<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test children</title>
		<script type="text/javascript" src="../js/jquery-3.3.1.slim.min.js"></script>
		<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/common.css" />
	</head>
	<body>
		<div>
			<table id="testTable" border="1" align="center" style="text-align: center;">
				<tr>
					<td>1111</td>
					<td>
						<span class="mySpan" style="color: #8FD19E;">span content</span><br />
						2222<br />
						<a href="www.baidu.com" style="color: red;text-decoration: none;">click to baidu</a>
					</td>
					<td>3333</td>
				</tr>
				<tr>
					<td>4444</td>
					<td>5555</td>
					<td>6666</td>
				</tr>
			</table>
		</div>
		<div style="text-align: center;">
			<button class="btn btn-outline-danger" onclick="testChild()">test</button>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			
		});
		function testChild() {
			//methods1:original javascript
			var table_v = document.getElementById("testTable");
			console.log("js get table is:");
			console.log(table_v);
			
			var tabBody_ = table_v.children[0];
			console.log("js get table body is:");
			console.log(tabBody_);
			
			var trs_ = tabBody_.children;
			console.log("js get trs is:");
			console.log(trs_);
			
			var tds_ = trs_[0].children;
			console.log("js get tds is:");
			console.log(tds_);
			
			var td2_ = tds_[1];
			console.log("js get first TR's second TD is:");
			console.log(td2_);
			
			var td2_html = td2_.innerHTML;
			console.log("js get first TR's second TD's html is:");
			console.log(td2_html);
			
			var td2_content = td2_.innerText;
			console.log("js get first TR's second TD's content is:");
			console.log(td2_content);
			
			//methods2:jquery
			var _trs = $("#testTable").children("td");
			console.log("jquery get trs is:");
			console.log(_trs);
		}
	</script>
</html>
